/*
  1、自定义 hooks
    * 以 use 开头；
    * 自定义 hooks 可以调用 React hooks；
*/

// 场景1：管理界面 - 表格 - 会请求数据、分页、搜索。。。
import axios from "axios";
import { getMaxListeners } from "process";
import { useState } from "react";

// interface ResDataProps {
//   code: string;
//   msg: string;
//   data: any;
// }

// 进阶
interface ResDataProps<T> {
  code: string;
  msg: string;
  data: T;
}
interface ResProps<T> {
  data: ResDataProps<T>;
  [key: string]: any;
}
interface DataOptionsProps {
  [key: string]: any;
}
interface OptionsProps {
  flag: boolean;
  cur: number;
  size: number;
  data: DataOptionsProps;
}
export function useList<T>(listReg: any, options?: OptionsProps) {
  const [list, setList] = useState<T>();
  const [loading, setLoading] = useState(false);

  const flag = options?.flag || true; // 默认自动请求
  const cur = options?.cur || 1;
  const size = options?.size || 10;
  const data = options?.data || {};

  const getList = () => {
    // 显示 loading
    const pa = { ...data, current: cur, pageSize: size };
    listReg(pa)
      .then((res: ResProps<T>) => {
        if (res.data.code == "200") {
          setList(res.data.data);
        } else {
          //
        }
        // 关闭loading
      })
      .catch((err: any) => {
        // ...
        // 关闭loading
      });
  };

  // 自动调用一次请求
  flag && getList();

  return {
    list,
    getList,
  };
}

// 调用
// const api = (parmas) => axios({parmas})
// const {list, getList} = useList<>(api)
// const {list2, getList2} = useList(api, {
//   flag: false
// })

// const { list2, getList2 } = useList(api, {
//   flag: false,
//   data: {},
// });

// 场景2：本地存储 - 没有响应式
export function useSsessionStorage(key: string, defaultValue?: any) {
  const [state, setState] = useState(() => getStorage());

  function getStorage() {
    const value = sessionStorage.getItem(key);
    if (value) {
      try {
        return JSON.parse(value);
      } catch (err) {
        // err
      }
    } else {
      return defaultValue;
    }
  }
  const updateState = (newState: any) => {
    if (typeof newState == "undefined") {
      sessionStorage.removeItem(key);
      setState(undefined);
    } else {
      sessionStorage.setItem(key, JSON.stringify(newState));
      setState(newState);
    }
  };

  return [state, updateState];
}
